<!DOCTYPE html>
<html lang="zh-CN">

<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width,initial-scale=1">
    <title>@extend | Sass中文文档</title>
    <meta name="description" content="Sass是世界上最成熟、稳定、强大的专业级CSS扩展语言">
    <meta name="keywords" content="Sass,Sass教程,Sass中国,Sass中文,Sass文档,SCSS,SCSS教程,SCSS中国,SCSS中文,SCSS文档,CSS预处理">
  <link rel="icon" href="/sass-cn/images/favicon.ico" preload="true" as="image">
    
    <link rel="preload" href="/sass-cn/assets/css/0.styles.2d6686da.css" as="style"><link rel="preload" href="/sass-cn/assets/js/app.deb571aa.js" as="script"><link rel="preload" href="/sass-cn/assets/js/layout-layout.f021cffe.js" as="script"><link rel="preload" href="/sass-cn/assets/js/vendors~layout-layout.096dd481.js" as="script"><link rel="preload" href="/sass-cn/assets/js/page-api-atrules-extend.cb5a5d75.js" as="script"><link rel="preload" href="/sass-cn/assets/js/93.6bc9799b.js" as="script"><link rel="prefetch" href="/sass-cn/assets/js/86.f407d520.js"><link rel="prefetch" href="/sass-cn/assets/js/87.34d80629.js"><link rel="prefetch" href="/sass-cn/assets/js/88.7da6d807.js"><link rel="prefetch" href="/sass-cn/assets/js/89.c6220562.js"><link rel="prefetch" href="/sass-cn/assets/js/90.9b5a2114.js"><link rel="prefetch" href="/sass-cn/assets/js/91.bd6167c2.js"><link rel="prefetch" href="/sass-cn/assets/js/92.339ec357.js"><link rel="prefetch" href="/sass-cn/assets/js/94.322094fc.js"><link rel="prefetch" href="/sass-cn/assets/js/95.376dbcc7.js"><link rel="prefetch" href="/sass-cn/assets/js/96.ab69b324.js"><link rel="prefetch" href="/sass-cn/assets/js/layout-notfound.626e4f7c.js"><link rel="prefetch" href="/sass-cn/assets/js/page-api-atrules-atroot.32ef08ae.js"><link rel="prefetch" href="/sass-cn/assets/js/page-api-atrules-debug.06148e5a.js"><link rel="prefetch" href="/sass-cn/assets/js/page-api-atrules-error.29586dbb.js"><link rel="prefetch" href="/sass-cn/assets/js/page-api-atrules-flow-each.4393ee83.js"><link rel="prefetch" href="/sass-cn/assets/js/page-api-atrules-flow-for.cb8126b0.js"><link rel="prefetch" href="/sass-cn/assets/js/page-api-atrules-flow-ifandelse.bc133ead.js"><link rel="prefetch" href="/sass-cn/assets/js/page-api-atrules-flow-readme.208a4bd0.js"><link rel="prefetch" href="/sass-cn/assets/js/page-api-atrules-flow-while.b671cb7c.js"><link rel="prefetch" href="/sass-cn/assets/js/page-api-atrules-formcss.6b9bf244.js"><link rel="prefetch" href="/sass-cn/assets/js/page-api-atrules-forward.84e92434.js"><link rel="prefetch" href="/sass-cn/assets/js/page-api-atrules-function.92dd9149.js"><link rel="prefetch" href="/sass-cn/assets/js/page-api-atrules-import.1caa72ed.js"><link rel="prefetch" href="/sass-cn/assets/js/page-api-atrules-mixinandinclude.317a55a5.js"><link rel="prefetch" href="/sass-cn/assets/js/page-api-atrules-readme.488e2ba3.js"><link rel="prefetch" href="/sass-cn/assets/js/page-api-atrules-use.389e0385.js"><link rel="prefetch" href="/sass-cn/assets/js/page-api-atrules-warn.2f405d31.js"><link rel="prefetch" href="/sass-cn/assets/js/page-api-breakchanges-compoundselectors.a819b0fe.js"><link rel="prefetch" href="/sass-cn/assets/js/page-api-breakchanges-readme.bd231221.js"><link rel="prefetch" href="/sass-cn/assets/js/page-api-breakchanges-variablesyntax.5a5f2d19.js"><link rel="prefetch" href="/sass-cn/assets/js/page-api-commandline-dart.48bed8a2.js"><link rel="prefetch" href="/sass-cn/assets/js/page-api-commandline-readme.07ce98e9.js"><link rel="prefetch" href="/sass-cn/assets/js/page-api-commandline-ruby.8eaf4b85.js"><link rel="prefetch" href="/sass-cn/assets/js/page-api-functions-colors.0e3e5304.js"><link rel="prefetch" href="/sass-cn/assets/js/page-api-functions-introspection.ada8df60.js"><link rel="prefetch" href="/sass-cn/assets/js/page-api-functions-lists.a4895d0e.js"><link rel="prefetch" href="/sass-cn/assets/js/page-api-functions-maps.45a902b5.js"><link rel="prefetch" href="/sass-cn/assets/js/page-api-functions-numbers.c8f4b6cc.js"><link rel="prefetch" href="/sass-cn/assets/js/page-api-functions-plain.fef59f4c.js"><link rel="prefetch" href="/sass-cn/assets/js/page-api-functions-readme.541e96b9.js"><link rel="prefetch" href="/sass-cn/assets/js/page-api-functions-selectors.38c993bc.js"><link rel="prefetch" href="/sass-cn/assets/js/page-api-functions-strings.175e953b.js"><link rel="prefetch" href="/sass-cn/assets/js/page-api-interpolation.c1b3ae69.js"><link rel="prefetch" href="/sass-cn/assets/js/page-api-jsapi.a56000a6.js"><link rel="prefetch" href="/sass-cn/assets/js/page-api-modules-color.8963ea84.js"><link rel="prefetch" href="/sass-cn/assets/js/page-api-modules-list.10a115ab.js"><link rel="prefetch" href="/sass-cn/assets/js/page-api-modules-map.e0491724.js"><link rel="prefetch" href="/sass-cn/assets/js/page-api-modules-math.0fa1c600.js"><link rel="prefetch" href="/sass-cn/assets/js/page-api-modules-meta.0db00faa.js"><link rel="prefetch" href="/sass-cn/assets/js/page-api-modules-readme.725f2037.js"><link rel="prefetch" href="/sass-cn/assets/js/page-api-modules-selector.277cf2d4.js"><link rel="prefetch" href="/sass-cn/assets/js/page-api-modules-string.f885bb86.js"><link rel="prefetch" href="/sass-cn/assets/js/page-api-operators-boolean.8989e7df.js"><link rel="prefetch" href="/sass-cn/assets/js/page-api-operators-equality.f9f7f23a.js"><link rel="prefetch" href="/sass-cn/assets/js/page-api-operators-numeric.99a7bdba.js"><link rel="prefetch" href="/sass-cn/assets/js/page-api-operators-readme.652142ed.js"><link rel="prefetch" href="/sass-cn/assets/js/page-api-operators-relational.0d200de4.js"><link rel="prefetch" href="/sass-cn/assets/js/page-api-operators-string.856849c0.js"><link rel="prefetch" href="/sass-cn/assets/js/page-api-readme.4d32e79b.js"><link rel="prefetch" href="/sass-cn/assets/js/page-api-stylerules-parentselector.ec3b0a60.js"><link rel="prefetch" href="/sass-cn/assets/js/page-api-stylerules-placeholderselectors.02d3d2d8.js"><link rel="prefetch" href="/sass-cn/assets/js/page-api-stylerules-propertydeclarations.c36f8cc8.js"><link rel="prefetch" href="/sass-cn/assets/js/page-api-stylerules-readme.0e7410e6.js"><link rel="prefetch" href="/sass-cn/assets/js/page-api-syntax-comments.96ee19bd.js"><link rel="prefetch" href="/sass-cn/assets/js/page-api-syntax-functions.ea6a9af7.js"><link rel="prefetch" href="/sass-cn/assets/js/page-api-syntax-parsing.b904a6f4.js"><link rel="prefetch" href="/sass-cn/assets/js/page-api-syntax-readme.73283f3d.js"><link rel="prefetch" href="/sass-cn/assets/js/page-api-syntax-structure.3ae5c00a.js"><link rel="prefetch" href="/sass-cn/assets/js/page-api-values-booleans.fe9e9754.js"><link rel="prefetch" href="/sass-cn/assets/js/page-api-values-colors.e2ba3180.js"><link rel="prefetch" href="/sass-cn/assets/js/page-api-values-functions.3c5f60ca.js"><link rel="prefetch" href="/sass-cn/assets/js/page-api-values-lists.c9668494.js"><link rel="prefetch" href="/sass-cn/assets/js/page-api-values-maps.e77a0fb7.js"><link rel="prefetch" href="/sass-cn/assets/js/page-api-values-null.93ac8da1.js"><link rel="prefetch" href="/sass-cn/assets/js/page-api-values-numbers.3976f2f1.js"><link rel="prefetch" href="/sass-cn/assets/js/page-api-values-readme.94af6f11.js"><link rel="prefetch" href="/sass-cn/assets/js/page-api-values-strings.2570f03f.js"><link rel="prefetch" href="/sass-cn/assets/js/page-api-variables.2b768950.js"><link rel="prefetch" href="/sass-cn/assets/js/page-code.04c89951.js"><link rel="prefetch" href="/sass-cn/assets/js/page-contact.31a84f81.js"><link rel="prefetch" href="/sass-cn/assets/js/page-install-readme.48b75800.js"><link rel="prefetch" href="/sass-cn/assets/js/page-learn-extend.93e31b0d.js"><link rel="prefetch" href="/sass-cn/assets/js/page-learn-import.d9dfee8b.js"><link rel="prefetch" href="/sass-cn/assets/js/page-learn-mixins.bb4b5fc6.js"><link rel="prefetch" href="/sass-cn/assets/js/page-learn-nesting.1fcb2b18.js"><link rel="prefetch" href="/sass-cn/assets/js/page-learn-operators.b089064a.js"><link rel="prefetch" href="/sass-cn/assets/js/page-learn-partials.516dba99.js"><link rel="prefetch" href="/sass-cn/assets/js/page-learn-preprocessing.8a2f2124.js"><link rel="prefetch" href="/sass-cn/assets/js/page-learn-readme.2a880d8a.js"><link rel="prefetch" href="/sass-cn/assets/js/page-learn-variables.cc64042a.js"><link rel="prefetch" href="/sass-cn/assets/js/page-readme.6924f94e.js">
    <link rel="stylesheet" href="/sass-cn/assets/css/0.styles.2d6686da.css">
    <meta name="baidu-site-verification" content="HISWYjeJhP">
    <meta name="google-site-verification" content="o-XFzkWKa1fqZMPS6L8cuu7-UCoqTSWKhk-tZAdIW9E">
    <script>var _hmt = _hmt || []; (function () { var hm = document.createElement("script"); hm.src = "https://hm.baidu.com/hm.js?0e27eeb01c53bbd49dcc535da62d57ac"; var s = document.getElementsByTagName("script")[0]; s.parentNode.insertBefore(hm, s) })();</script>
</head>

<body>
    <div id="app" data-server-rendered="true"><div class="theme-container"><header class="navbar"><div class="sidebar-button"><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" role="img" viewBox="0 0 448 512" class="icon"><path fill="currentColor" d="M436 124H12c-6.627 0-12-5.373-12-12V80c0-6.627 5.373-12 12-12h424c6.627 0 12 5.373 12 12v32c0 6.627-5.373 12-12 12zm0 160H12c-6.627 0-12-5.373-12-12v-32c0-6.627 5.373-12 12-12h424c6.627 0 12 5.373 12 12v32c0 6.627-5.373 12-12 12zm0 160H12c-6.627 0-12-5.373-12-12v-32c0-6.627 5.373-12 12-12h424c6.627 0 12 5.373 12 12v32c0 6.627-5.373 12-12 12z"></path></svg></div> <a href="/sass-cn/" class="home-link router-link-active"><!----> <span class="site-name">Sass中文文档</span></a> <div class="links"><div class="search-box"><input aria-label="Search" autocomplete="off" spellcheck="false" value=""> <!----></div> <nav class="nav-links can-hide"><div class="nav-item"><a href="/sass-cn/install/" class="nav-link">安装</a></div><div class="nav-item"><div class="dropdown-wrapper"><a class="dropdown-title"><span class="title">学习指南</span> <span class="arrow right"></span></a> <ul class="nav-dropdown" style="display:none;"><li class="dropdown-item"><!----> <a href="/sass-cn/learn/Preprocessing.html" class="nav-link">预处理</a></li><li class="dropdown-item"><!----> <a href="/sass-cn/learn/Variables.html" class="nav-link">变量</a></li><li class="dropdown-item"><!----> <a href="/sass-cn/learn/Nesting.html" class="nav-link">嵌套规则</a></li><li class="dropdown-item"><!----> <a href="/sass-cn/learn/Partials.html" class="nav-link">片段文件</a></li><li class="dropdown-item"><!----> <a href="/sass-cn/learn/Import.html" class="nav-link">文件导入</a></li><li class="dropdown-item"><!----> <a href="/sass-cn/learn/Mixins.html" class="nav-link">混合器</a></li><li class="dropdown-item"><!----> <a href="/sass-cn/learn/Extend.html" class="nav-link">扩展和继承</a></li><li class="dropdown-item"><!----> <a href="/sass-cn/learn/Operators.html" class="nav-link">操作符</a></li></ul></div></div><div class="nav-item"><div class="dropdown-wrapper"><a class="dropdown-title"><span class="title">文档</span> <span class="arrow right"></span></a> <ul class="nav-dropdown" style="display:none;"><li class="dropdown-item"><!----> <a href="/sass-cn/api/Syntax/" class="nav-link">语法</a></li><li class="dropdown-item"><!----> <a href="/sass-cn/api/StyleRules/" class="nav-link">样式规则</a></li><li class="dropdown-item"><!----> <a href="/sass-cn/api/Variables.html" class="nav-link">变量</a></li><li class="dropdown-item"><!----> <a href="/sass-cn/api/Interpolation.html" class="nav-link">插值</a></li><li class="dropdown-item"><!----> <a href="/sass-cn/api/AtRules/" class="nav-link router-link-active">AtRules</a></li><li class="dropdown-item"><!----> <a href="/sass-cn/api/Values/" class="nav-link">值类型</a></li><li class="dropdown-item"><!----> <a href="/sass-cn/api/Operators/" class="nav-link">操作符</a></li><li class="dropdown-item"><!----> <a href="/sass-cn/api/Modules/" class="nav-link">内置模块</a></li><li class="dropdown-item"><!----> <a href="/sass-cn/api/BreakChanges/" class="nav-link">重大改变</a></li><li class="dropdown-item"><!----> <a href="/sass-cn/api/CommandLine/" class="nav-link">命令行</a></li><li class="dropdown-item"><!----> <a href="/sass-cn/api/JsApi/" class="nav-link">JavaScript API</a></li></ul></div></div><div class="nav-item"><a href="https://sass-lang.com" target="_blank" rel="noopener noreferrer" class="nav-link external">
  英文官网
  <svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg></a></div><div class="nav-item"><a href="/sass-cn/Contact.html" class="nav-link">Contact</a></div> <a href="https://github.com/zongyang/sass-cn" target="_blank" rel="noopener noreferrer" class="repo-link">
    源码
    <svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg></a></nav></div></header> <div class="sidebar-mask"></div> <aside class="sidebar"><nav class="nav-links"><div class="nav-item"><a href="/sass-cn/install/" class="nav-link">安装</a></div><div class="nav-item"><div class="dropdown-wrapper"><a class="dropdown-title"><span class="title">学习指南</span> <span class="arrow right"></span></a> <ul class="nav-dropdown" style="display:none;"><li class="dropdown-item"><!----> <a href="/sass-cn/learn/Preprocessing.html" class="nav-link">预处理</a></li><li class="dropdown-item"><!----> <a href="/sass-cn/learn/Variables.html" class="nav-link">变量</a></li><li class="dropdown-item"><!----> <a href="/sass-cn/learn/Nesting.html" class="nav-link">嵌套规则</a></li><li class="dropdown-item"><!----> <a href="/sass-cn/learn/Partials.html" class="nav-link">片段文件</a></li><li class="dropdown-item"><!----> <a href="/sass-cn/learn/Import.html" class="nav-link">文件导入</a></li><li class="dropdown-item"><!----> <a href="/sass-cn/learn/Mixins.html" class="nav-link">混合器</a></li><li class="dropdown-item"><!----> <a href="/sass-cn/learn/Extend.html" class="nav-link">扩展和继承</a></li><li class="dropdown-item"><!----> <a href="/sass-cn/learn/Operators.html" class="nav-link">操作符</a></li></ul></div></div><div class="nav-item"><div class="dropdown-wrapper"><a class="dropdown-title"><span class="title">文档</span> <span class="arrow right"></span></a> <ul class="nav-dropdown" style="display:none;"><li class="dropdown-item"><!----> <a href="/sass-cn/api/Syntax/" class="nav-link">语法</a></li><li class="dropdown-item"><!----> <a href="/sass-cn/api/StyleRules/" class="nav-link">样式规则</a></li><li class="dropdown-item"><!----> <a href="/sass-cn/api/Variables.html" class="nav-link">变量</a></li><li class="dropdown-item"><!----> <a href="/sass-cn/api/Interpolation.html" class="nav-link">插值</a></li><li class="dropdown-item"><!----> <a href="/sass-cn/api/AtRules/" class="nav-link router-link-active">AtRules</a></li><li class="dropdown-item"><!----> <a href="/sass-cn/api/Values/" class="nav-link">值类型</a></li><li class="dropdown-item"><!----> <a href="/sass-cn/api/Operators/" class="nav-link">操作符</a></li><li class="dropdown-item"><!----> <a href="/sass-cn/api/Modules/" class="nav-link">内置模块</a></li><li class="dropdown-item"><!----> <a href="/sass-cn/api/BreakChanges/" class="nav-link">重大改变</a></li><li class="dropdown-item"><!----> <a href="/sass-cn/api/CommandLine/" class="nav-link">命令行</a></li><li class="dropdown-item"><!----> <a href="/sass-cn/api/JsApi/" class="nav-link">JavaScript API</a></li></ul></div></div><div class="nav-item"><a href="https://sass-lang.com" target="_blank" rel="noopener noreferrer" class="nav-link external">
  英文官网
  <svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg></a></div><div class="nav-item"><a href="/sass-cn/Contact.html" class="nav-link">Contact</a></div> <a href="https://github.com/zongyang/sass-cn" target="_blank" rel="noopener noreferrer" class="repo-link">
    源码
    <svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg></a></nav> <div style="padding:1rem 0;"><script async="async" src="https://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"></script> <ins data-ad-client="ca-pub-6227283216337087" data-ad-slot="1743359721" class="adsbygoogle" style="display:inline-block;width:260px;height:120px"></ins> <script>
    (adsbygoogle = window.adsbygoogle || []).push({});
    </script></div> <ul class="sidebar-links"><li><a href="/sass-cn/install/" class="sidebar-link">安装</a></li><li><section class="sidebar-group depth-0"><p class="sidebar-heading"><span>学习指南</span> <!----></p> <ul class="sidebar-links sidebar-group-items"><li><a href="/sass-cn/learn/" class="sidebar-link">基础知识</a></li><li><a href="/sass-cn/learn/Preprocessing.html" class="sidebar-link">预处理</a></li><li><a href="/sass-cn/learn/Variables.html" class="sidebar-link">变量</a></li><li><a href="/sass-cn/learn/Nesting.html" class="sidebar-link">嵌套规则</a></li><li><a href="/sass-cn/learn/Partials.html" class="sidebar-link">片段文件</a></li><li><a href="/sass-cn/learn/Import.html" class="sidebar-link">文件导入</a></li><li><a href="/sass-cn/learn/Mixins.html" class="sidebar-link">混合器</a></li><li><a href="/sass-cn/learn/Extend.html" class="sidebar-link">扩展与继承</a></li><li><a href="/sass-cn/learn/Operators.html" class="sidebar-link">操作符</a></li></ul></section></li><li><section class="sidebar-group depth-0"><p class="sidebar-heading"><span>文档</span> <!----></p> <ul class="sidebar-links sidebar-group-items"><li><a href="/sass-cn/api/" class="sidebar-link">综述</a></li><li><section class="sidebar-group collapsable is-sub-group depth-1"><p class="sidebar-heading"><span>语法</span> <span class="arrow right"></span></p> <!----></section></li><li><section class="sidebar-group collapsable is-sub-group depth-1"><p class="sidebar-heading"><span>样式规则</span> <span class="arrow right"></span></p> <!----></section></li><li><a href="/sass-cn/api/Variables.html" class="sidebar-link">变量</a></li><li><a href="/sass-cn/api/Interpolation.html" class="sidebar-link">插值</a></li><li><section class="sidebar-group collapsable is-sub-group depth-1"><p class="sidebar-heading open"><span>@规则</span> <span class="arrow down"></span></p> <ul class="sidebar-links sidebar-group-items"><li><a href="/sass-cn/api/AtRules/" class="sidebar-link">综述</a></li><li><a href="/sass-cn/api/AtRules/Import.html" class="sidebar-link">@import</a></li><li><a href="/sass-cn/api/AtRules/MixinAndinclude.html" class="sidebar-link">@mixin、@include</a></li><li><a href="/sass-cn/api/AtRules/Function.html" class="sidebar-link">@function</a></li><li><a href="/sass-cn/api/AtRules/Extend.html" class="active sidebar-link">@extend</a><ul class="sidebar-sub-headers"><li class="sidebar-sub-header"><a href="/sass-cn/api/AtRules/Extend.html#工作原理" class="sidebar-link">工作原理</a></li><li class="sidebar-sub-header"><a href="/sass-cn/api/AtRules/Extend.html#占位选择器" class="sidebar-link">占位选择器</a></li><li class="sidebar-sub-header"><a href="/sass-cn/api/AtRules/Extend.html#强制和可选扩展" class="sidebar-link">强制和可选扩展</a></li><li class="sidebar-sub-header"><a href="/sass-cn/api/AtRules/Extend.html#extends-or-mixins" class="sidebar-link">Extends or Mixins?</a></li><li class="sidebar-sub-header"><a href="/sass-cn/api/AtRules/Extend.html#限制" class="sidebar-link">限制</a></li></ul></li><li><a href="/sass-cn/api/AtRules/Error.html" class="sidebar-link">@error</a></li><li><a href="/sass-cn/api/AtRules/Warn.html" class="sidebar-link">@warn</a></li><li><a href="/sass-cn/api/AtRules/Debug.html" class="sidebar-link">@debug</a></li><li><a href="/sass-cn/api/AtRules/AtRoot.html" class="sidebar-link">@at-root</a></li><li><section class="sidebar-group collapsable is-sub-group depth-2"><p class="sidebar-heading"><span>流程控制</span> <span class="arrow right"></span></p> <!----></section></li><li><a href="/sass-cn/api/AtRules/FormCss.html" class="sidebar-link">CSS 原生@规则</a></li></ul></section></li><li><section class="sidebar-group collapsable is-sub-group depth-1"><p class="sidebar-heading"><span>值类型</span> <span class="arrow right"></span></p> <!----></section></li><li><section class="sidebar-group collapsable is-sub-group depth-1"><p class="sidebar-heading"><span>操作符</span> <span class="arrow right"></span></p> <!----></section></li><li><section class="sidebar-group collapsable is-sub-group depth-1"><p class="sidebar-heading"><span>内置模块</span> <span class="arrow right"></span></p> <!----></section></li><li><section class="sidebar-group collapsable is-sub-group depth-1"><p class="sidebar-heading"><span>重大改变</span> <span class="arrow right"></span></p> <!----></section></li><li><section class="sidebar-group collapsable is-sub-group depth-1"><p class="sidebar-heading"><span>命令行</span> <span class="arrow right"></span></p> <!----></section></li><li><a href="/sass-cn/api/JsApi.html" class="sidebar-link">JavaScript API</a></li></ul></section></li></ul> </aside> <main class="page"> <div class="theme-default-content content__default"><h1 id="extend"><a href="#extend" aria-hidden="true" class="header-anchor">#</a> @extend</h1> <div><script async="async" src="https://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"></script> <ins data-ad-client="ca-pub-6227283216337087" data-ad-slot="9720145993" class="adsbygoogle" style="display:inline-block;width:600px;height:90px"></ins> <script>
    (adsbygoogle = window.adsbygoogle || []).push({});
    </script></div> <p>在设计页面时，常常会出现这样的情况：一个类应该具有另一个类的所有样式，以及它自己的特定样式。例如，<a href="http://getbem.com/naming/" target="_blank" rel="noopener noreferrer">BEM方法<svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg></a>鼓励修饰符类与块或元素类位于相同的元素上。但是这会造成混乱的HTML，容易出现忘记同时包含两个类的错误，并且会给标记带来非语义样式的问题。</p> <div class="language-html extra-class"><pre class="language-html"><code><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>div</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">&quot;</span>error error--serious<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>
  Oh no! You've been hacked!
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>div</span><span class="token punctuation">&gt;</span></span>
</code></pre></div><div class="language-css extra-class"><pre class="language-css"><code><span class="token selector">.error</span> <span class="token punctuation">{</span>
  <span class="token property">border</span><span class="token punctuation">:</span> 1px #f00<span class="token punctuation">;</span>
  <span class="token property">background-color</span><span class="token punctuation">:</span> #fdd<span class="token punctuation">;</span>
<span class="token punctuation">}</span>

<span class="token selector">.error--serious</span> <span class="token punctuation">{</span>
  <span class="token property">border-width</span><span class="token punctuation">:</span> 3px<span class="token punctuation">;</span>
<span class="token punctuation">}</span>
</code></pre></div><p>Sass的<code>@extend</code>规则解决了这个问题。它被写为<code>@extend &lt;selector&gt;</code>，它告诉Sass一个选择器应该继承另一个选择器的样式。</p> <div class="el-tabs el-tabs--top el-tabs--border-card"><div class="el-tabs__header is-top"><div class="el-tabs__nav-wrap is-top"><div class="el-tabs__nav-scroll"><div role="tablist" class="el-tabs__nav is-top" style="transform:translateX(-0px);"></div></div></div></div><div class="el-tabs__content"><div role="tabpanel" aria-hidden="true" id="pane-null" aria-labelledby="tab-null" class="el-tab-pane" style="display:none;"><div class="language-scss extra-class"><pre class="language-scss"><code><span class="token selector">.error </span><span class="token punctuation">{</span>
  <span class="token property">border</span><span class="token punctuation">:</span> 1px #f00<span class="token punctuation">;</span>
  <span class="token property">background-color</span><span class="token punctuation">:</span> #fdd<span class="token punctuation">;</span>

  <span class="token selector"><span class="token parent important">&amp;</span>--serious </span><span class="token punctuation">{</span>
    <span class="token keyword">@extend</span> .error<span class="token punctuation">;</span>
    <span class="token property">border-width</span><span class="token punctuation">:</span> 3px<span class="token punctuation">;</span>
  <span class="token punctuation">}</span>
<span class="token punctuation">}</span>
</code></pre></div></div> <div role="tabpanel" aria-hidden="true" id="pane-null" aria-labelledby="tab-null" class="el-tab-pane" style="display:none;"><div class="language-sass extra-class"><pre class="language-sass"><code><span class="token selector">.error</span>
<span class="token property-line">  <span class="token property">border</span><span class="token punctuation">:</span> 1px #f00</span>
<span class="token property-line">  <span class="token property">background-color</span><span class="token punctuation">:</span> #fdd</span>

  <span class="token selector">&amp;--serious</span>
<span class="token atrule-line">    <span class="token atrule">@extend</span> .error</span>
<span class="token property-line">    <span class="token property">border-width</span><span class="token punctuation">:</span> 3px</span>
</code></pre></div></div> <div role="tabpanel" aria-hidden="true" id="pane-null" aria-labelledby="tab-null" class="el-tab-pane" style="display:none;"><div class="language-css extra-class"><pre class="language-css"><code><span class="token selector">.error, .error--serious</span> <span class="token punctuation">{</span>
  <span class="token property">border</span><span class="token punctuation">:</span> 1px #f00<span class="token punctuation">;</span>
  <span class="token property">background-color</span><span class="token punctuation">:</span> #fdd<span class="token punctuation">;</span>
<span class="token punctuation">}</span>
<span class="token selector">.error--serious</span> <span class="token punctuation">{</span>
  <span class="token property">border-width</span><span class="token punctuation">:</span> 3px<span class="token punctuation">;</span>
<span class="token punctuation">}</span>

</code></pre></div></div></div></div> <p>当一个类扩展另一个类时，Sass样式化所有匹配扩展器的元素，就好像它们也匹配被扩展的类一样。当一个类选择器扩展另一个类时，它的工作原理与将扩展类添加到HTML中已有扩展类的每个元素一样。您只需编写<code>class=&quot;error--serious&quot;</code>， Sass将确保它的样式与<code>class=&quot;error&quot;</code>一样。</p> <p>当然，选择器并不只是在样式规则中单独使用。Sass知道扩展选择器使用的所有地方。这样可以确保元素的样式与扩展选择器匹配。</p> <div class="el-tabs el-tabs--top el-tabs--border-card"><div class="el-tabs__header is-top"><div class="el-tabs__nav-wrap is-top"><div class="el-tabs__nav-scroll"><div role="tablist" class="el-tabs__nav is-top" style="transform:translateX(-0px);"></div></div></div></div><div class="el-tabs__content"><div role="tabpanel" aria-hidden="true" id="pane-null" aria-labelledby="tab-null" class="el-tab-pane" style="display:none;"><div class="language-scss extra-class"><pre class="language-scss"><code><span class="token selector">.error:hover, .error--serious:hover </span><span class="token punctuation">{</span>
  <span class="token property">background-color</span><span class="token punctuation">:</span> #fee<span class="token punctuation">;</span>
<span class="token punctuation">}</span>

<span class="token selector">.error--serious </span><span class="token punctuation">{</span>
  <span class="token property">border-width</span><span class="token punctuation">:</span> 3px<span class="token punctuation">;</span>
<span class="token punctuation">}</span>
</code></pre></div></div> <div role="tabpanel" aria-hidden="true" id="pane-null" aria-labelledby="tab-null" class="el-tab-pane" style="display:none;"><div class="language-sass extra-class"><pre class="language-sass"><code><span class="token property-line"><span class="token property">.error</span><span class="token punctuation">:</span><span class="token property">hover</span></span>
<span class="token property-line">  <span class="token property">background-color</span><span class="token punctuation">:</span> #fee</span>

<span class="token selector">.error--serious</span>
<span class="token atrule-line">  <span class="token atrule">@extend</span> .error</span>
<span class="token property-line">  <span class="token property">border-width</span><span class="token punctuation">:</span> 3px</span>
</code></pre></div></div> <div role="tabpanel" aria-hidden="true" id="pane-null" aria-labelledby="tab-null" class="el-tab-pane" style="display:none;"><div class="language-css extra-class"><pre class="language-css"><code><span class="token selector">.error:hover, .error--serious:hover</span> <span class="token punctuation">{</span>
  <span class="token property">background-color</span><span class="token punctuation">:</span> #fee<span class="token punctuation">;</span>
<span class="token punctuation">}</span>

<span class="token selector">.error--serious</span> <span class="token punctuation">{</span>
  <span class="token property">border-width</span><span class="token punctuation">:</span> 3px<span class="token punctuation">;</span>
<span class="token punctuation">}</span>
</code></pre></div></div></div></div> <div class="warning custom-block"><p>扩展是在其余所有的样式（特别是<a href="/sass-cn/api/StyleRules/ParentSelector.html">父选择器</a>）编译完成之后再编译的。这意味着<code>@extend .error</code>，它不会影响内部的选择器<code>.error { &amp;__icon { ... } }</code>。这也意味着<a href="/sass-cn/api/StyleRules/ParentSelector.html#sassscript">SassScript中的父选择器</a>不能看到扩展后的结果。</p></div> <h2 id="工作原理"><a href="#工作原理" aria-hidden="true" class="header-anchor">#</a> 工作原理</h2> <p>与将样式复制到当前样式规则的<a href="/sass-cn/api/AtRules/MixinAndinclude.html">mixin</a>不同，<code>@extend</code>更新了包含扩展选择器的样式规则，以便它们也包含扩展选择器。扩展选择器时，Sass做了<strong>智能统一</strong>处理:</p> <ul><li>它不会生成像<code>#main#footer</code>这样的选择器，这些选择器匹配不到任何元素。</li> <li>它确保复杂的选择器是交错的，这样无论嵌套HTML元素的顺序如何，它们都可以工作。</li> <li>它尽可能地减少冗余选择器，同时仍然确保选择器的特性大于或等于被扩展的选择器的特性。</li> <li>它知道一个选择器何时匹配另一个选择器所做的一切，并可以将它们组合在一起。</li> <li>它智能地处理<a href="https://developer.mozilla.org/zh-CN/docs/Web/CSS/CSS_Selectors#Combinators" target="_blank" rel="noopener noreferrer">组合选择器<svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg></a>、<a href="https://developer.mozilla.org/zh-CN/docs/Web/CSS/Universal_selectors" target="_blank" rel="noopener noreferrer">通用选择器<svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg></a>和<a href="https://developer.mozilla.org/zh-CN/docs/Web/CSS/:not" target="_blank" rel="noopener noreferrer">:not选择器<svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg></a>。</li></ul> <div class="el-tabs el-tabs--top el-tabs--border-card"><div class="el-tabs__header is-top"><div class="el-tabs__nav-wrap is-top"><div class="el-tabs__nav-scroll"><div role="tablist" class="el-tabs__nav is-top" style="transform:translateX(-0px);"></div></div></div></div><div class="el-tabs__content"><div role="tabpanel" aria-hidden="true" id="pane-null" aria-labelledby="tab-null" class="el-tab-pane" style="display:none;"><div class="language-scss extra-class"><pre class="language-scss"><code><span class="token selector">.content nav.sidebar </span><span class="token punctuation">{</span>
  <span class="token keyword">@extend</span> .info<span class="token punctuation">;</span>
<span class="token punctuation">}</span>

<span class="token comment">// 不会扩展，因为“p”与“nav”不兼容。</span>
<span class="token selector">p.info </span><span class="token punctuation">{</span>
  <span class="token property">background-color</span><span class="token punctuation">:</span> #dee9fc<span class="token punctuation">;</span>
<span class="token punctuation">}</span>

<span class="token comment">// 没有办法知道.guide和.content的层级关系，因此Sass安全起见会生成两种选择器。</span>
<span class="token selector">.guide .info </span><span class="token punctuation">{</span>
  <span class="token property">border</span><span class="token punctuation">:</span> 1px solid <span class="token function">rgba</span><span class="token punctuation">(</span>#000<span class="token punctuation">,</span> 0.8<span class="token punctuation">)</span><span class="token punctuation">;</span>
  <span class="token property">border-radius</span><span class="token punctuation">:</span> 2px<span class="token punctuation">;</span>
<span class="token punctuation">}</span>

<span class="token comment">// Sass知道每个匹配“main”的元素。也匹配“.content”。并避免生成不必要的交错选择器。</span>
<span class="token selector">main.content .info </span><span class="token punctuation">{</span>
  <span class="token property">font-size</span><span class="token punctuation">:</span> 0.8em<span class="token punctuation">;</span>
<span class="token punctuation">}</span>
</code></pre></div></div> <div role="tabpanel" aria-hidden="true" id="pane-null" aria-labelledby="tab-null" class="el-tab-pane" style="display:none;"><div class="language-sass extra-class"><pre class="language-sass"><code><span class="token selector">.content nav.sidebar</span>
<span class="token atrule-line">  <span class="token atrule">@extend</span> .info</span>

<span class="token comment">// 不会扩展，因为“p”与“nav”不兼容。</span>
<span class="token selector">p.info</span>
<span class="token property-line">  <span class="token property">background-color</span><span class="token punctuation">:</span> #dee9fc</span>

<span class="token comment">// 没有办法知道.guide和.content的层级关系，因此Sass安全起见会生成两种选择器。</span>
<span class="token selector">.guide .info</span>
<span class="token property-line">  <span class="token property">border</span><span class="token punctuation">:</span> 1px solid rgba(#000, 0.8)</span>
<span class="token property-line">  <span class="token property">border-radius</span><span class="token punctuation">:</span> 2px</span>

<span class="token comment">// Sass知道每个匹配“main”的元素。也匹配“.content”。并避免生成不必要的交错选择器。</span>
<span class="token selector">main.content .info</span>
<span class="token property-line">  <span class="token property">font-size</span><span class="token punctuation">:</span> 0.8em</span>

</code></pre></div></div> <div role="tabpanel" aria-hidden="true" id="pane-null" aria-labelledby="tab-null" class="el-tab-pane" style="display:none;"><div class="language-css extra-class"><pre class="language-css"><code><span class="token selector">p.info</span> <span class="token punctuation">{</span>
  <span class="token property">background-color</span><span class="token punctuation">:</span> #dee9fc<span class="token punctuation">;</span>
<span class="token punctuation">}</span>

<span class="token selector">.guide .info, .guide .content nav.sidebar, .content .guide nav.sidebar</span> <span class="token punctuation">{</span>
  <span class="token property">border</span><span class="token punctuation">:</span> 1px solid <span class="token function">rgba</span><span class="token punctuation">(</span>0<span class="token punctuation">,</span> 0<span class="token punctuation">,</span> 0<span class="token punctuation">,</span> 0.8<span class="token punctuation">)</span><span class="token punctuation">;</span>
  <span class="token property">border-radius</span><span class="token punctuation">:</span> 2px<span class="token punctuation">;</span>
<span class="token punctuation">}</span>

<span class="token selector">main.content .info, main.content nav.sidebar</span> <span class="token punctuation">{</span>
  <span class="token property">font-size</span><span class="token punctuation">:</span> 0.8em<span class="token punctuation">;</span>
<span class="token punctuation">}</span>
</code></pre></div></div></div></div> <div class="tip custom-block"><p>您可以通过使用<a href="%E5%BE%85%E7%A1%AE%E5%AE%9A">选择器函数</a>直接使用Sass的智能统一功能！<a href="%E5%BE%85%E7%A1%AE%E5%AE%9A">selector-unify()</a>返回一个匹配两个选择器的交集的选择器，而<a href="%E5%BE%85%E7%A1%AE%E5%AE%9A">selector-extend()</a>的工作原理与<code>@extend</code>类似，但只在一个选择器上工作。</p></div> <div class="warning custom-block"><p>因为<code>@extend</code>更新包含扩展选择器的样式规则，所以它们在<a href="https://developer.mozilla.org/zh-US/docs/Web/CSS/Cascade" target="_blank" rel="noopener noreferrer">层叠计算<svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg></a>中优先级更高，这取决于扩展选择器的样式规则出现在何处，而不是<code>@exten</code>d出现在何处。这可能会令人困惑，但请记住：如果将扩展类添加到HTML中，这些规则的优先级将是相同的!</p></div> <h2 id="占位选择器"><a href="#占位选择器" aria-hidden="true" class="header-anchor">#</a> 占位选择器</h2> <p>有时候，您想编写一个只打算扩展的样式规则。在这种情况下，您可以使用<a href="/sass-cn/api/StyleRules/PlaceholderSelectors.html">占位符选择器</a>，以<code>%</code>开头的类选择器，而不是以<code>.</code>开头。CSS输出中不包含任何包含占位符的选择器，但会输出继承了该占位符选择器的选择器。</p> <div class="el-tabs el-tabs--top el-tabs--border-card"><div class="el-tabs__header is-top"><div class="el-tabs__nav-wrap is-top"><div class="el-tabs__nav-scroll"><div role="tablist" class="el-tabs__nav is-top" style="transform:translateX(-0px);"></div></div></div></div><div class="el-tabs__content"><div role="tabpanel" aria-hidden="true" id="pane-null" aria-labelledby="tab-null" class="el-tab-pane" style="display:none;"><div class="language-scss extra-class"><pre class="language-scss"><code><span class="token selector">.alert:hover, <span class="token placeholder">%strong-alert</span> </span><span class="token punctuation">{</span>
  <span class="token property">font-weight</span><span class="token punctuation">:</span> bold<span class="token punctuation">;</span>
<span class="token punctuation">}</span>

<span class="token selector"><span class="token placeholder">%strong-alert</span>:hover </span><span class="token punctuation">{</span>
  <span class="token property">color</span><span class="token punctuation">:</span> red<span class="token punctuation">;</span>
<span class="token punctuation">}</span>
</code></pre></div></div> <div role="tabpanel" aria-hidden="true" id="pane-null" aria-labelledby="tab-null" class="el-tab-pane" style="display:none;"><div class="language-sass extra-class"><pre class="language-sass"><code><span class="token property-line"><span class="token property">.alert</span><span class="token punctuation">:</span><span class="token property">hover,</span> <span class="token operator">%</span>strong-alert</span>
<span class="token property-line">  <span class="token property">font-weight</span><span class="token punctuation">:</span> bold</span>

<span class="token property-line"><span class="token property">%strong-alert</span><span class="token punctuation">:</span><span class="token property">hover</span> </span>
<span class="token property-line">  <span class="token property">color</span><span class="token punctuation">:</span> red</span>
</code></pre></div></div> <div role="tabpanel" aria-hidden="true" id="pane-null" aria-labelledby="tab-null" class="el-tab-pane" style="display:none;"><div class="language-css extra-class"><pre class="language-css"><code><span class="token selector">.alert:hover</span> <span class="token punctuation">{</span>
  <span class="token property">font-weight</span><span class="token punctuation">:</span> bold<span class="token punctuation">;</span>
<span class="token punctuation">}</span>
</code></pre></div></div></div></div> <h2 id="强制和可选扩展"><a href="#强制和可选扩展" aria-hidden="true" class="header-anchor">#</a> 强制和可选扩展</h2> <p>通常，如果<code>@extend</code>不匹配样式表中的任何选择器，Sass将产生一个错误。这有助于避免输入错误或扩展选择器名称修改了而继承时使用时却没有修改的情况。扩展选择器必须是存在的，这是<strong>强制性</strong>的。</p> <p>不过，这可能并不总是你想要的。如果您希望<code>@extend</code>在扩展选择器不存在的情况下什么也不做，只需在末尾添加<code>!optional</code>即可。</p> <h2 id="extends-or-mixins"><a href="#extends-or-mixins" aria-hidden="true" class="header-anchor">#</a> Extends or Mixins?</h2> <p>Extends和<a href="/sass-cn/api/AtRules/MixinAndinclude.html">mixin</a>都是在Sass中封装和复用样式的方法，这自然会产生何时使用哪个问题。当您需要使用<a href="/sass-cn/api/AtRules/MixinAndinclude.html#参数">参数</a>配置样式时，mixin显然是更合适的，但是如果它们只是样式块呢？</p> <p>根据经验，在表示语义类（或其他语义选择器）之间的关系时，extends是最佳选择。因为带有<code>.error--erious</code>类的元素也可表示错误的样式，所以扩展<code>.error</code>是有意义的。但是对于非语义的样式集合，编写mixin可以避免级联问题，并使其更容易配置。</p> <div class="tip custom-block"><p>大多数web服务器使用一种非常擅长处理重复、相同文本块的算法来压缩它们所提供的CSS。这意味着，尽管mixin生成的CSS可能比extend多，但它们可能不会显著增加用户下载的数量。因此，选择对您的用例最有意义的特性，而不是生成最少CSS的特性!</p></div> <h2 id="限制"><a href="#限制" aria-hidden="true" class="header-anchor">#</a> 限制</h2> <h3 id="禁止使用的选择器"><a href="#禁止使用的选择器" aria-hidden="true" class="header-anchor">#</a> 禁止使用的选择器</h3> <p>兼容性：Dart Sass  ✓ <span class="sa-ver-divider">|</span>LibSass  ✗<span class="sa-ver-divider">|</span>Ruby Sass  ✗</p> <blockquote><p>LibSass和Ruby Sass目前允许<code>@extend .message.info</code>这样的语句。但是，此行为与<code>@extend</code>的定义不匹配，如<code>class =&quot;message info&quot;</code>的元素，它将受到包含<code>.message</code>或<code>.info</code>的样式规则的影响。
<br>
为了保持<code>@extend</code>的定义简单易懂，并保持实现干净高效，现在不赞成这种行为，并将从未来的版本中删除。<br> <br>
有关详细信息，请参阅<a href="/sass-cn/api/BreakChanges/CompoundSelectors.html">重大改变</a>的更改页面。</p></blockquote> <p>只能像<code>.info</code>或<code>a</code>这样简单的选择器可以被扩展。如果<code>.message.info</code>可以被扩展，那么<code>@extend</code>的定义表示，与扩展器匹配的元素将被设计成与<code>.message.info</code>匹配的样式。这和匹配<code>.message</code>和<code>.info</code>是一样的，所以用它代替<code>@extend .message,.info</code>没有任何好处。</p> <p>类似地，如果<code>.main .info</code>可以被扩展，它将（几乎）做与扩展<code>.info</code>相同的事情。这些细微的差别不值得让人觉得它在做一些本质上不同的事情，所以这也是不允许的。</p> <div class="el-tabs el-tabs--top el-tabs--border-card"><div class="el-tabs__header is-top"><div class="el-tabs__nav-wrap is-top"><div class="el-tabs__nav-scroll"><div role="tablist" class="el-tabs__nav is-top" style="transform:translateX(-0px);"></div></div></div></div><div class="el-tabs__content"><div role="tabpanel" aria-hidden="true" id="pane-null" aria-labelledby="tab-null" class="el-tab-pane" style="display:none;"><div class="language-scss extra-class"><pre class="language-scss"><code><span class="token selector">.alert </span><span class="token punctuation">{</span>
  <span class="token keyword">@extend</span> .message.info<span class="token punctuation">;</span>
  <span class="token comment">//      ^^^^^^^^^^^^^</span>
  <span class="token comment">// Error: Write @extend .message, .info instead.</span>

  <span class="token keyword">@extend</span> .main .info<span class="token punctuation">;</span>
  <span class="token comment">//      ^^^^^^^^^^^</span>
  <span class="token comment">// Error: write @extend .info instead.</span>
<span class="token punctuation">}</span>
</code></pre></div></div> <div role="tabpanel" aria-hidden="true" id="pane-null" aria-labelledby="tab-null" class="el-tab-pane" style="display:none;"><div class="language-sass extra-class"><pre class="language-sass"><code><span class="token selector">.alert</span>
<span class="token atrule-line">  <span class="token atrule">@extend</span> .message.info</span>
  <span class="token comment">//      ^^^^^^^^^^^^^</span>
  <span class="token comment">// Error: Write @extend .message, .info instead.</span>

<span class="token atrule-line">  <span class="token atrule">@extend</span> .main .info</span>
  <span class="token comment">//      ^^^^^^^^^^^</span>
  <span class="token comment">// Error: write @extend .info instead.</span>
</code></pre></div></div></div></div> <h3 id="启发式html"><a href="#启发式html" aria-hidden="true" class="header-anchor">#</a> 启发式HTML</h3> <p>当<code>@extend</code><a href="/sass-cn/api/AtRules/Extend.html#工作原理">交错复杂的选择器</a>时，它不会生成所有可能的祖先选择器组合。它可能生成的许多选择器实际上不太可能匹配真实的HTML，并且生成它们都将使样式表太大而没有实际价值。相反，它使用<a href="https://en.wikipedia.org/wiki/Heuristic" target="_blank" rel="noopener noreferrer">启发式算法<svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg></a>：它假设每个选择器的祖先都是自包含的，而不与任何其他选择器的祖先交叉。</p> <div class="el-tabs el-tabs--top el-tabs--border-card"><div class="el-tabs__header is-top"><div class="el-tabs__nav-wrap is-top"><div class="el-tabs__nav-scroll"><div role="tablist" class="el-tabs__nav is-top" style="transform:translateX(-0px);"></div></div></div></div><div class="el-tabs__content"><div role="tabpanel" aria-hidden="true" id="pane-null" aria-labelledby="tab-null" class="el-tab-pane" style="display:none;"><div class="language-scss extra-class"><pre class="language-scss"><code><span class="token selector">header .warning li </span><span class="token punctuation">{</span>
  <span class="token property">font-weight</span><span class="token punctuation">:</span> bold<span class="token punctuation">;</span>
<span class="token punctuation">}</span>

<span class="token selector">aside .notice dd </span><span class="token punctuation">{</span>
  <span class="token comment">// Sass doesn't generate CSS to match the &lt;dd&gt; in</span>
  <span class="token comment">//</span>
  <span class="token comment">// &lt;header&gt;</span>
  <span class="token comment">//   &lt;aside&gt;</span>
  <span class="token comment">//     &lt;div class=&quot;warning&quot;&gt;</span>
  <span class="token comment">//       &lt;div class=&quot;notice&quot;&gt;</span>
  <span class="token comment">//         &lt;dd&gt;...&lt;/dd&gt;</span>
  <span class="token comment">//       &lt;/div&gt;</span>
  <span class="token comment">//     &lt;/div&gt;</span>
  <span class="token comment">//   &lt;/aside&gt;</span>
  <span class="token comment">// &lt;/header&gt;</span>
  <span class="token comment">//</span>
  <span class="token comment">// because matching all elements like that would require us to generate nine</span>
  <span class="token comment">// new selectors instead of just two.</span>
  <span class="token keyword">@extend</span> li<span class="token punctuation">;</span>
<span class="token punctuation">}</span>
</code></pre></div></div> <div role="tabpanel" aria-hidden="true" id="pane-null" aria-labelledby="tab-null" class="el-tab-pane" style="display:none;"><div class="language-sass extra-class"><pre class="language-sass"><code><span class="token selector">header .warning li</span>
<span class="token property-line">  <span class="token property">font-weight</span><span class="token punctuation">:</span> bold</span>


<span class="token selector">aside .notice dd</span>
  <span class="token comment">// Sass doesn't generate CSS to match the &lt;dd&gt; in</span>
  <span class="token comment">//</span>
  <span class="token comment">// &lt;header&gt;</span>
  <span class="token comment">//   &lt;aside&gt;</span>
  <span class="token comment">//     &lt;div class=&quot;warning&quot;&gt;</span>
  <span class="token comment">//       &lt;div class=&quot;notice&quot;&gt;</span>
  <span class="token comment">//         &lt;dd&gt;...&lt;/dd&gt;</span>
  <span class="token comment">//       &lt;/div&gt;</span>
  <span class="token comment">//     &lt;/div&gt;</span>
  <span class="token comment">//   &lt;/aside&gt;</span>
  <span class="token comment">// &lt;/header&gt;</span>
  <span class="token comment">//</span>
  <span class="token comment">// because matching all elements like that would require us to generate nine</span>
  <span class="token comment">// new selectors instead of just two.</span>
<span class="token atrule-line">  <span class="token atrule">@extend</span> li</span>
</code></pre></div></div> <div role="tabpanel" aria-hidden="true" id="pane-null" aria-labelledby="tab-null" class="el-tab-pane" style="display:none;"><div class="language-css extra-class"><pre class="language-css"><code><span class="token selector">header .warning li, header .warning aside .notice dd, aside .notice header .warning dd</span> <span class="token punctuation">{</span>
  <span class="token property">font-weight</span><span class="token punctuation">:</span> bold<span class="token punctuation">;</span>
<span class="token punctuation">}</span>
</code></pre></div></div></div></div> <h3 id="在-media中使用扩展"><a href="#在-media中使用扩展" aria-hidden="true" class="header-anchor">#</a> 在@media中使用扩展</h3> <p>虽然<code>@extend</code>允许在<a href="/sass-cn/api/AtRules/" class="router-link-active">@media和其他CSS @规则</a>中使用，但不允许扩展出现在其@规则之外的选择器。这是因为扩展选择器只应用于给定的媒体上下文中，而且无法确保在不复制整个样式规则的情况下将限制保留在生成的选择器中。</p> <div class="el-tabs el-tabs--top el-tabs--border-card"><div class="el-tabs__header is-top"><div class="el-tabs__nav-wrap is-top"><div class="el-tabs__nav-scroll"><div role="tablist" class="el-tabs__nav is-top" style="transform:translateX(-0px);"></div></div></div></div><div class="el-tabs__content"><div role="tabpanel" aria-hidden="true" id="pane-null" aria-labelledby="tab-null" class="el-tab-pane" style="display:none;"><div class="language-scss extra-class"><pre class="language-scss"><code><span class="token atrule"><span class="token rule">@media</span> screen <span class="token operator">and</span> <span class="token punctuation">(</span><span class="token property">max-width</span><span class="token punctuation">:</span> 600px<span class="token punctuation">)</span></span> <span class="token punctuation">{</span>
  <span class="token selector">.error--serious </span><span class="token punctuation">{</span>
    <span class="token keyword">@extend</span> .error<span class="token punctuation">;</span>
    <span class="token comment">//      ^^^^^^</span>
    <span class="token comment">// Error: &quot;.error&quot; was extended in @media, but used outside it.</span>
  <span class="token punctuation">}</span>
<span class="token punctuation">}</span>

<span class="token selector">.error </span><span class="token punctuation">{</span>
  <span class="token property">border</span><span class="token punctuation">:</span> 1px #f00<span class="token punctuation">;</span>
  <span class="token property">background-color</span><span class="token punctuation">:</span> #fdd<span class="token punctuation">;</span>
<span class="token punctuation">}</span>
</code></pre></div></div> <div role="tabpanel" aria-hidden="true" id="pane-null" aria-labelledby="tab-null" class="el-tab-pane" style="display:none;"><div class="language-sass extra-class"><pre class="language-sass"><code><span class="token atrule-line"><span class="token atrule">@media</span> screen and (max-width: 600px)</span>
  <span class="token selector">.error--serious</span>
<span class="token atrule-line">    <span class="token atrule">@extend</span> .error</span>
    <span class="token comment">//      ^^^^^^</span>
    <span class="token comment">// Error: &quot;.error&quot; was extended in @media, but used outside it.</span>

<span class="token selector">.error</span>
<span class="token property-line">  <span class="token property">border</span><span class="token punctuation">:</span> 1px #f00</span>
<span class="token property-line">  <span class="token property">background-color</span><span class="token punctuation">:</span> #fdd</span>
</code></pre></div></div></div></div></div> <footer class="page-edit"><!----> <div class="last-updated"><span class="prefix">上次更新: </span> <span class="time">11/5/2019, 4:49:11 PM</span></div></footer> <div class="page-nav"><p class="inner"><span class="prev">
        ←
        <a href="/sass-cn/api/AtRules/Function.html" class="prev">
          @function
        </a></span> <span class="next"><a href="/sass-cn/api/AtRules/Error.html">
          @error
        </a>
        →
      </span></p></div> </main></div><div class="global-ui"></div></div>
    <script src="/sass-cn/assets/js/app.deb571aa.js" defer></script><script src="/sass-cn/assets/js/layout-layout.f021cffe.js" defer></script><script src="/sass-cn/assets/js/vendors~layout-layout.096dd481.js" defer></script><script src="/sass-cn/assets/js/page-api-atrules-extend.cb5a5d75.js" defer></script><script src="/sass-cn/assets/js/93.6bc9799b.js" defer></script>
</body>

</html>